<template>
  <!-- 严格匹配图像中的680px最大宽度和32px间距 -->
  <div class="status-container">
    <div 
      v-for="(step, index) in steps" 
      :key="index"
      class="status-step"
      :style="{
        backgroundColor: step.style?.bgColor,
        border: `1px solid ${step.style?.borderColor}`
      }"
    >
      <!-- 状态标记（精确匹配图像中的圆形设计） -->
      <div class="step-marker" :class="step.status">
        <deepin-icon
          v-if="step.status === 'approved'"
          name="check-circle"
          :color="step.status === 'approved' ? '#52c41a' : '#1890ff'"
          size="18"
        />
        <span v-else class="step-number">{{ index + 1 }}</span>
      </div>

      <!-- 内容区域（严格匹配图像文字样式） -->
      <div class="step-content">
        <h3 :style="{ color: step.style?.textColor }">
          {{ step.category }} - {{ step.title }}
        </h3>
        <p class="time-label" v-if="step.time">
          审核时间：{{ formatTime(step.time) }}
        </p>
        <div v-if="step.status === 'rejected'" class="reject-notice">
          <deepin-icon name="warning" color="#f5222d" />
          <span>驳回原因：{{ step.description || '未说明原因' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { fetchReviewProgress } from '../api/status';

const props = defineProps({
  appId: {
    type: String,
    required: true
  }
});

const steps = ref([]);

// 时间格式化（匹配图像中的时间显示格式）
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 自动响应appId变化
watch(() => props.appId, async (newVal) => {
  if (newVal) {
    try {
      steps.value = await fetchReviewProgress(newVal);
    } catch (error) {
      console.error('状态加载失败:', error.message);
    }
  }
}, { immediate: true });
</script>

<style scoped>
/* 完全匹配图像设计参数 */
.status-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.status-step {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.step-marker {
  width: 32px;
  height: 32px;
  border: 2px solid #1890ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

.step-marker.approved {
  border-color: #52c41a;
  background-color: #f6ffed;
}

.step-number {
  font-size: 14px;
  color: #1890ff;
}

.step-content h3 {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
  color: rgba(0,0,0,0.85);
}

.time-label {
  font-size: 12px;
  color: rgba(0,0,0,0.45);
  margin: 4px 0 0;
}

.reject-notice {
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: #f5222d;
  font-size: 12px;
  
  > span {
    margin-left: 4px;
  }
}
</style>